<!-- 
  @description: 分类卡片
-->
<template>
  <div class="todo-tabs-dv" @click="tabClick()">
    <L-Card
      :customStyle="cardStyle()"
      :class="{ active: TodoTabItem.isActive }"
    >
      <template #default>
        <!-- 单行模式 -->
        <template v-if="TodoTabItem.mode === 'SINGLE_ROW'">
          <div class="top single">
            <span>{{ TodoTabItem.title }}</span>
            <span class="number">{{ TodoTabItem.number }}</span>
          </div>
        </template>

        <!-- 双行模式 -->
        <template v-if="TodoTabItem.mode === 'DOUBLE_ROW'">
          <div class="top">
            <span>{{ TodoTabItem.title }}</span>
          </div>
          <div class="bottom">
            <span class="number">{{ TodoTabItem.number }}</span>
            <span class="icon-youjiantou_huaban icon"></span>
          </div>
        </template>
      </template>
    </L-Card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, PropType, ref } from 'vue'
import { Mode, TodoTab } from '../../types/TodoType'

const props = defineProps({
  TodoTabItem: {
    type: Object as PropType<TodoTab>,
    required: true,
  },
  // 默认激活项
  activeName: {
    type: String,
    default: 'All',
  },
})

const emit = defineEmits(['tabClick'])

onMounted(() => {
  props.TodoTabItem.isActive = props.TodoTabItem.title === props.activeName
})

function tabClick() {
  emit('tabClick', props.TodoTabItem.title)
}

function cardStyle() {
  switch (props.TodoTabItem.mode) {
    case Mode.SINGLE_ROW:
      return {
        width: '150px',
        height: '50px',
        padding: '7px 15px',
      }
    case Mode.DOUBLE_ROW:
      return {
        width: '150px',
        height: '100px',
      }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 55%;
  font-size: 26px;
  color: @text-color;
  transition: all 0.2s ease;
}
.single {
  width: 100%;
  height: 100%;

  .fl(flex, space-between,center);
}
.bottom {
  width: 100%;
  height: 45%;
  transition: all 0.2s ease;
  .fl(flex, space-between, flex-end);
}

.number {
  font-size: 20px;
  color: @primary-color;
}

.icon {
  font-size: 24px;
  color: @sub-grey-color;
}

.active {
  background-color: @primary-color !important;
  color: @primary-light-color !important;

  .top {
    color: @primary-light-color !important;
  }

  .bottom {
    span {
      color: @primary-light-color !important;
    }
  }

  .single {
    span {
      color: @primary-light-color !important;
    }
  }
}
</style>
